<template>
  <u-modal :show="isShowModal" :closeOnClickOverlay="true" :showConfirmButton="false" :mask-close-able="true">
    <view class="flex-col justify-start section_3 pos">
      <view class="flex-col section_6">
        <text class="self-center font_3 text_4">Password Verificaton</text>
        <view class="mt-24 flex-row justify-between section_4 align-center">
          <text>Password:</text>
          <u-input class="text_7 ml-14 border-unset" placeholder="Enter password..." :type="showPassword ? 'text' : 'password'" v-model="password"></u-input>
          <view class="flex-col justify-start items-end self-center image-wrapper">
            <image
              src="@/static/common/eye-close-black.png"
              v-if="!showPassword"
              style="width: 40rpx; height: 40rpx"
              @click="
                () => {
                  showPassword = true;
                }
              "
            ></image>
            <image
              src="@/static/common/eye-open-white.png"
              v-else
              style="width: 40rpx; height: 40rpx"
              @click="
                () => {
                  showPassword = false;
                }
              "
            ></image>
          </view>
        </view>
        <view class="mt-32 flex-row self-stretch">
          <view class="flex-col justify-start items-center text-wrapper_3 ml-31" @click="handleOk">
            <text class="font_3 text_7">Confirm</text>
          </view>
        </view>
      </view>
    </view>
  </u-modal>
</template>

<script>
export default {
  components: {},
  props: {
    isShowModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      password: '',
      showPassword: false
    };
  },
  methods: {
    handleOk() {
      this.$emit('confirm', this.password);
    }
  }
};
</script>

<style scoped lang="scss">
.ml-31 {
  margin-left: 1.94rem;
}
/deep/ .u-input__content__field-wrapper__field {
  color: #ffffff !important;
}

/deep/ .u-popup__content {
  padding-top: unset;
  background-color: unset;
  color: #ffffff;

  .u-modal {
    background-image: url('@/static/common/b-modal.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 22rem;
  }
  .u-modal__content {
    padding: unset !important;
  }

  .u-line {
    display: none;
  }
}

.section_3 {

  .section_6 {
    margin: 0 1rem;
    padding: 1.63rem 4rem 1.6rem;
    border-radius: 1.5rem;
    background-image: url('@/static/common/dialog_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .font_3 {
      font-size: 1rem;
      font-family: PingFang SC;
      line-height: 0.93rem;
      color: #ffffff;
    }

    .text_4 {
      line-height: 0.74rem;
    }

    .font_2 {
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.7rem;
      color: #ffffff;
    }

    .text_5 {
      color: #00f6ff;
      line-height: 0.88rem;
    }

    .section_7 {
      padding: 0.5rem 0.75rem;
      background-color: #ffffff1a;
      border-radius: 0.5rem;

      .input-address {
        padding: 6px 9px;
        width: 95%;
        height: 100%;
        border: none;

        /deep/ .uni-input-input {
          caret-color: red;
          caret-width: 3px;
          font-size: 1rem;
          font-family: PingFang SC;
          line-height: 0.93rem;
          color: #ffffff;
        }
      }

      .font_4 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff80;
      }

      .font {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff;
      }
    }

    .text-wrapper_2 {
      padding: 1.13rem 0;
      flex: 1 1 8.75rem;
      background-color: #ffffff33;
      border-radius: 0.75rem;
      backdrop-filter: blur(1rem);
      height: 3rem;

      .text_6 {
        color: #ffffffb3;
        font-size: 1rem;
        font-family: PingFang SC;
        line-height: 0.74rem;
      }
    }

    .text-wrapper_3 {
      padding: 1.13rem 0;
      flex: 1 1 8.75rem;
      background-image: linear-gradient(113.8deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
      border-radius: 0.75rem;
      height: 3rem;

      .text_7 {
        line-height: 0.93rem;
      }
    }
  }
}
</style>
